<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <!--jquery-->
    <script src="asserts/js/jquery-2.1.1.min.js"></script>
    <!--bootstrap-->
    <link href="asscerts/bootstrap-3.4.1-dist/css/bootstrap.css" rel="stylesheet">
    <script src="asscerts/bootstrap-3.4.1-dist/js/bootstrap.js"></script>
    <!--bootstrapValidator-->
    <!--<script type="text/javascript" src="asscerts/dist/js/bootstrapValidator.js"></script>
    <script type="text/javascript" src="asscerts/dist/js/language/zh_CN.js"></script>-->
</head>
<style>
    .navbar-inverse{
        height: 35px;
        font-size: 6px;
    }
    #div1{
        /*border: red solid 1px;*/
        height: 80px;
        width: 72%;
        margin-left: 192px;
        margin-top: 40px;
    }
    #div2{
        overflow: hidden;
        /*border: red solid 1px;*/
        float: left;
        height: 80px;
        width: 150px
    }
    #div3{
        /*border: red solid 1px;*/
        float: left;
        margin-left: 20px;
        font-size: 18px;
        height: 80px;
        width: 350px;
        font-weight:500;
        color: #4a4a4a;
        padding-top: 25px;
        font-family:微软雅黑;
    }
    .span1{
        /* 鼠标移入变小手 */
        cursor: pointer;
    }
    .span1:hover{
        font-weight: bold;
    }
    .input1{
        /*border: red solid 1px;*/
        height: 80px;
        width: 300px;
        padding-top: 22px;
        float: right;
        color: #FFFFFF;

    }
    #button_id{
        float: right;
        width: 70px;
        height: 34px;
        background-color: #ff6e39;
        border: 0px;
        border-radius: 4px;
        box-shadow: 0px 0px 5px #888888;
    }
    #div4{
        margin-left: 190px;
        width: 72%;
        height: 250px;
        overflow: hidden;
    }
    #div5{
        /*border: red solid 1px;*/
        height: 50px;
        width: 150px;
        margin-left: 190px;
        font-size: 19px;
        padding-top: 12px;
    }
    #div6{
        margin-left: 190px;
        /*border: red solid 1px;*/
        width: 910px;
        height: 1000px;
        /* 鼠标移入变小手 */
        cursor: pointer;
    }
    #div4:hover{
        /*等比例放大*/
        /*transform: scale();*/
    }
    .div6_1{
        /*border: red solid 1px;*/
        border-top: #ff6e39 solid 2px;
        /*background-color: #fafafa;*/
        float: left;
        width: 200px;
        height: 300px;
        margin-left: 13px;
        margin-right: 13px;
        margin-bottom: 10px;
    }
    .div6_1:hover{
        transform: scale(1.02);
    }
    #a2{
        padding-top: 7px;
        margin-top: 0px;
        padding-right:0px;
        color: #eb9e9b
    }
    #a2:hover{
        color: #eb565f;
    }
</style>
<script>
    $(function () {
        $.ajax({
            url:"/taobei_web/cart/getCartSum",
            type:"get",
            dataType:"json",
            success:function (respBean) {
                if (respBean.status == 200) {
                    $("#nums").html(respBean.data.nums);
                    $("#a2").html("欢迎你："+respBean.data.userName)
                    $("#a2").attr("data-target","12")
                    $(".gouwu").attr("data-target","12")
                    $(".gouwu").attr("onclick","check()")
                }
            }
        })
        $(".qding").click(function () {
            $.ajax({
                url:"/taobei_web/user/login",
                data:{
                    tel:$("#recipient-name").val(),
                    password:$("#recipient-password").val()
                },
                type:"post",
                dataType:"json",
                success:function (respBean) {
                    if (respBean.status == 200) {
                        alert(respBean.msg);
                        location.href="userIndex.html"
                    }else {
                        alert(respBean.msg)
                    }
                }
            })
        })
    })
    function check() {
        location.href = "cart.html"
    }
</script>
<body>
    <nav class=" navbar-inverse navbar-fixed-top">
        <div class="container-fluid" >
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class=""><a href="#" style="padding-top: 0px;margin-top: 7px;margin-left: 150px">淘贝首页</a></li>
                    <li><a href="#" style="padding-top: 0px;margin-top: 7px">问题反馈</a></li>
                    <li><a href="#" style="padding-top: 0px;margin-top: 7px">卖家中心</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"  style="padding-top: 7px;margin-top: 0px;height: 35px;">商品分类 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">数码电子</a></li>
                            <li><a href="#">食品</a></li>
                            <li><a href="#">生活用品</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">服装 | 男装 | 女装</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">厨具用品</a></li>
                        </ul>
                    </li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#"  id="a2" data-toggle="modal" data-target="#exampleModal">亲，请登录</a></li>
                    <li><a href="#" style="padding-top: 7px;margin-top: 0px;">注册</a></li>
                    <li><a href="#"  id="1" class="gouwu" data-toggle="modal" data-target="#exampleModal" style="padding-top: 7px;margin-top: 0px;height: 35px;margin-right: 150px">购物车<span id="nums" style="color: #eb9e9b">0</span></a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <div id="div1">
        <div id="div2">
            <img src="asscerts/img/taobeilogo.jpg" style="height: 250px;margin-top: -85px;margin-left: -30px">
        </div>
        <div id="div3">
            <span class="span1">数码电子</span>
            <span style="margin-left: 10px" class="span1">生活用品</span>
            <span style="margin-left: 10px" class="span1">服装饰品</span>
            <span style="margin-left: 10px" class="span1">厨具用品</span>
        </div>
        <div class="form-group input1">
            <input type="text" class="form-control " style="width: 220px;float: left" placeholder="幸福生活，搜索一下" name="username" id="username">
            <input id="button_id" type="button" value="搜索" style="">
        </div>
    </div>
    <div id="div4">
        <iframe align="center" width="100%" height="100%" src="Demo01.html"  frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
    </div>
    <div id="div5">
        <span>数码品牌  ></span>
    </div>
    <div id="div6">
        <div class="div6_1">
            <div><img src="asscerts/img/0b92f82917a9c400.jpg" style="width: 200px"></div>
            <div style="text-align: center; margin-top: -8px;font-size: 15px">华为P40Pro</div>
            <div style="text-align: center;font-size: 10px;color: #88868d;margin-top: 5px"><p style="margin-bottom: 0px">【可选12期白条免息】Apple 苹果 iPhone 13 5G手机 粉色 128G(壳膜+品牌充电套装)</p></div>
            <div style="color: red;font-size: 15px;text-align: center">￥5779.0</div>
        </div>
        <div class="div6_1">
            <div><img src="asscerts/img/97b6c959c2a65f39.jpg" style="width: 200px"></div>
            <div style="text-align: center; margin-top: -8px;font-size: 15px">华为P40Pro</div>
            <div style="text-align: center;font-size: 10px;color: #88868d;margin-top: 5px"><p style="margin-bottom: 0px">【可选12期白条免息】Apple 苹果 iPhone 13 5G手机 粉色 128G(壳膜+品牌充电套装)</p></div>
            <div style="color: red;font-size: 15px;text-align: center">￥5779.0</div>
        </div>
        <div class="div6_1">
            <div><img src="asscerts/img/97b6c959c2a65f39.jpg" style="width: 200px"></div>
            <div style="text-align: center; margin-top: -8px;font-size: 15px">华为P40Pro</div>
            <div style="text-align: center;font-size: 10px;color: #88868d;margin-top: 5px"><p style="margin-bottom: 0px">【可选12期白条免息】Apple 苹果 iPhone 13 5G手机 粉色 128G(壳膜+品牌充电套装)</p></div>
            <div style="color: red;font-size: 15px;text-align: center">￥5779.0</div>
        </div>
        <div class="div6_1">
            <div><img src="asscerts/img/979e177d45399d49.jpg" style="width: 200px"></div>
            <div style="text-align: center; margin-top: -8px;font-size: 15px">华为P40Pro</div>
            <div style="text-align: center;font-size: 10px;color: #88868d;margin-top: 5px"><p style="margin-bottom: 0px">【可选12期白条免息】Apple 苹果 iPhone 13 5G手机 粉色 128G(壳膜+品牌充电套装)</p></div>
            <div style="color: red;font-size: 15px;text-align: center">￥5779.0</div>
        </div>
        <div class="div6_1">
            <div><img src="asscerts/img/8482dd85161fa4a7.jpg" style="width: 200px"></div>
            <div style="text-align: center; margin-top: -8px;font-size: 15px">华为P40Pro</div>
            <div style="text-align: center;font-size: 10px;color: #88868d;margin-top: 5px"><p style="margin-bottom: 0px">【可选12期白条免息】Apple 苹果 iPhone 13 5G手机 粉色 128G(壳膜+品牌充电套装)</p></div>
            <div style="color: red;font-size: 15px;text-align: center">￥5779.0</div>
        </div>
        <div class="div6_1">
            <div><img src="asscerts/img/97b6c959c2a65f39.jpg" style="width: 200px"></div>
            <div style="text-align: center; margin-top: -8px;font-size: 15px">华为P40Pro</div>
            <div style="text-align: center;font-size: 10px;color: #88868d;margin-top: 5px"><p style="margin-bottom: 0px">【可选12期白条免息】Apple 苹果 iPhone 13 5G手机 粉色 128G(壳膜+品牌充电套装)</p></div>
            <div style="color: red;font-size: 15px;text-align: center">￥5779.0</div>
        </div>
    </div>
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="exampleModalLabel">用户请登录</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label for="recipient-name" class="control-label">用户名:</label>
                            <input type="text" class="form-control" id="recipient-name">
                        </div>
                        <div class="form-group">
                            <label for="recipient-name" class="control-label">密码:</label>
                            <input type="text" class="form-control" id="recipient-password">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary qding">确定</button>
                </div>
            </div>
        </div>
    </div>
</body>

</html>